<template>
  <p-input-text v-model="inputValue" @change="change">
    <template #append>
      <p-button style="color: var(--text-color)" title="字符串，双击变成数字" @dblclick="toggleStrDigit">
        <span title="数字，双击变成字符串" v-if="isDigit">
          D
        </span>
        <span title="字符串，双击变成数字" v-else>
          S
        </span>
      </p-button>
    </template>
  </p-input-text>

</template>

<script setup>
import {ref, watchEffect} from "vue";

const props = defineProps({
  modelValue: {
    type: [String, Number],
  }
});
const emits = defineEmits(['update:modelValue']);

const inputValue = ref(null);

const isDigit = ref(false)

watchEffect(() => {
  isDigit.value = typeof props.modelValue === 'number';
  inputValue.value = props.modelValue;
})

function change(val) {

  parse(val);
}


function toggleStrDigit() {
  isDigit.value = !isDigit.value;
  parse(inputValue.value);
}

function parse(val) {
  if (isDigit.value) {
    try {
      inputValue.value = parseFloat(val) || 0;
    } catch (e) {
      inputValue.value = 0;
    }
  } else {
    inputValue.value = "" + val;
  }
  emits('update:modelValue', inputValue.value)
}

</script>

<style scoped lang="scss">

</style>
